<template>
	<view class="page">
		<!-- #ifdef H5 -->
			<topVue title="一键体验" :isBack="true" rightIcon="server-fill"></topVue>
		<!-- #endif -->
		<scroll-view class="main-content" scroll-y>
			<!-- 轮播图 -->
			<view class="w100 margin0">
				<u-swiper :list="banners" height="300"></u-swiper>
			</view>
			<view class="h2">微信秒变AI</view>
			<view class="stepVue flex-between align-center padding-row30">
				<view class="step text-center text-center">1. 选择体验方向</view>
				<u-icon name="arrow-rightward" color="#333" size="32"></u-icon>
				<view class="step text-center">2. 微信扫一扫</view>
				<u-icon name="arrow-rightward" color="#333" size="32"></u-icon>
				<view class="step text-center">3. 绑定成功</view>
			</view>
			
			<!-- 案例查看 -->
			<view class="h2" style="padding-bottom: 0;">案例查看</view>
			<view class="item margin20" v-for="(item, index) in 8" :key="index">
				<view class="top">新美业-若水精华液</view>
				<view class="bot flex">
					<view class="flex-1">
						<view class="descri">该AI解决微信实时客服，效果图发送，产品答疑和思域群发</view>
						<view class="lignt">亮点：多图多效果图发送</view>
						<view class="flex margin20">
							<view class="tag">AI语音对话</view>
							<view class="tag">多效果图</view>
						</view>
					</view>
					<image src="../../static/weChat/5.jpg"></image>
				</view>
			</view>
		</scroll-view>
		
		<view class="botVue flex-center align-center">
			<view class="btn">开始体验</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				banners: [
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
						},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	.main-content {
		width: 100%;
		height: calc(100vh - var(--window-bottom) - var(--window-top) - 92rpx - 140rpx);
		padding: 30rpx 30rpx 0;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #EBF3FD, #DBF8E9);
		.h2 {
			font-weight: 700 ;
			font-size: 30rpx;
			color: #000;
			padding: 30rpx 0 20rpx 0;
		}
		.stepVue {
			width: 100%;
			height: 120rpx;
			background: #fff;
			border-radius: 12rpx;
			.step {
				font-weight: 600;
				font-size: 26rpx;
			}
		}
		.item {
			width: 690rpx;
			height: 420rpx;
			background: #fff;
			border-radius: 12rpx;
			.top {
				width: 100%;
				height: 100rpx;
				border-radius: 12rpx 12rpx 0 0;
				line-height: 100rpx;
				padding-left: 20rpx;
				color: #fff;
				font-weight: 600;
				font-size: 30rpx;
				background: linear-gradient(to right, #49DC81, #3B84F3);
			}
			.bot {
				width: 100%;
				height: 320rpx;
				padding: 30rpx;
				.descri {
					color: #968082;
				}
				.lignt {
					color: #968082;
					padding-top: 15rpx;
				}
				.tag {
					width: 150rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					background: #FCE7F3;
					color: #A6326E;
					margin-right: 15rpx;
					border-radius: 12rpx;
					font-size: 24rpx;
				}
				image {
					width: 220rpx;
					height: 100%;
					border-radius: 12rpx;
					margin-left: 30rpx;
				}
			}
		}
	}
	.botVue {
		width: 100%;
		height: 140rpx;
		background: #DBF8E9;
		.btn {
			width: 630rpx;
			height: 88rpx;
			background: linear-gradient(to bottom, #10B981, #3B82F6);
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			border-radius: 12rpx;
		}
	}
</style>